/**
 * width = border + padding + 内容的宽度
 * height = border + padding + 内容高度
 */

view {
  box-sizing: border-box;
}

image {
  will-change: transform;
}

/**
 * 处理视图容器 scroll-view, scroll-x 时调整横向滚动
 */
.scroll-row {
  width: 100%;
  white-space: nowrap;
  box-sizing: border-box;
}

.scroll-row-item {
  display: inline-block;
}

/**
 * 垂直水平居中
 * 左 中 右 对齐
 */
.xy-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-nowrap {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/**
 * 元素的宽高
 * 100%宽高
 */
.w100 {
  width: 100%;
}

.h100 {
  height: 100vh;
}

/**
 * mt1 - 100 margin-top 1rpx - 100rpx
 * ml1 - 100 margin-left 1rpx - 100rpx
 * mb1 - 100 margin-bottom 1rpx - 100rpx
 * mr1 - 100 margin-right 1rpx - 100rpx
 * pt1 - 100 padding-top 1rpx - 100rpx
 * pl1 - 100 padding-left 1rpx - 100rpx
 * pb1 - 100 padding-bottom 1rpx - 100rpx
 * pr1 - 100 padding-right 1rpx - 100rpx
 */
// $maxNumber: 100;

// @for $val from 0 through $maxNumber {
//   .mt#{$val} {
//     margin-top: #{$val}rpx;
//   }

//   .ml#{$val} {
//     margin-left: #{$val}rpx;
//   }

//   .mb#{$val} {
//     margin-bottom: #{$val}rpx;
//   }

//   .mr#{$val} {
//     margin-right: #{$val}rpx;
//   }

//   .pt#{$val} {
//     padding-top: #{$val}rpx;
//   }

//   .pl#{$val} {
//     padding-left: #{$val}rpx;
//   }

//   .pb#{$val} {
//     padding-bottom: #{$val}rpx;
//   }

//   .pr#{$val} {
//     padding-right: #{$val}rpx;
//   }
// }


$minRpx:10;
@while $minRpx <= 50 {
  .mt#{$minRpx} {
    margin-top: #{$minRpx}rpx;
  }

  .ml#{$minRpx} {
    margin-left: #{$minRpx}rpx;
  }

  .mb#{$minRpx} {
    margin-bottom: #{$minRpx}rpx;
  }

  .mr#{$minRpx} {
    margin-right: #{$minRpx}rpx;
  }

  .pt#{$minRpx} {
    padding-top: #{$minRpx}rpx;
  }

  .pl#{$minRpx} {
    padding-left: #{$minRpx}rpx;
  }

  .pb#{$minRpx} {
    padding-bottom: #{$minRpx}rpx;
  }

  .pr#{$minRpx} {
    padding-right: #{$minRpx}rpx;
  }
  $minRpx:$minRpx+10
}
/**
 * 栅栏布局, 分为三种
 * 1. col-xxx, 将750rpx 划分为 12份, xxx表示占据几份
 * 2. span-xxx, 按百分比划分, 共划分 20份。一份占据 5%
 * 3. span-24-xxx, 按百分比布局, 共划分 24份。xxx 就是 24/xxxs  span-24-12 就是占据一半
 */
[class*='col-'],
[class*='span-'],
[class*='span24-'] {
  min-height: 1px;
  box-sizing: border-box !important;
}

/*浮动*/
.fl {
  float: left;
}

.fr {
  float: right;
}

.cf {
  clear: both;
}

/* 栅栏一 12份 */
.col-1 {
  width: 62.5rpx;
}

.col-2 {
  width: 125rpx;
}

.col-3 {
  width: 187.5rpx;
}

.col-4 {
  width: 250rpx;
}

.col-5 {
  width: 312.5rpx;
}

.col-6 {
  width: 375rpx;
}

.col-7 {
  width: 437.5rpx;
}

.col-8 {
  width: 500rpx;
}

.col-9 {
  width: 562.5rpx;
}

.col-10 {
  width: 625rpx;
}

.col-11 {
  width: 687.5rpx;
}

.col-12 {
  width: 750rpx;
}

/* 栅栏二 20份 */
.span-1 {
  width: 5%;
}

.span-2 {
  width: 10%;
}

.span-3 {
  width: 15%;
}

.span-4 {
  width: 20%;
}

.span-5 {
  width: 25%;
}

.span-6 {
  width: 30%;
}

.span-7 {
  width: 35%;
}

.span-8 {
  width: 40%;
}

.span-9 {
  width: 45%;
}

.span-10 {
  width: 50%;
}

.span-11 {
  width: 55%;
}

.span-12 {
  width: 60%;
}

.span-13 {
  width: 65%;
}

.span-14 {
  width: 70%;
}

.span-15 {
  width: 75%;
}

.span-16 {
  width: 80%;
}

.span-17 {
  width: 85%;
}

.span-18 {
  width: 90%;
}

.span-19 {
  width: 95%;
}

.span-20 {
  width: 100%;
}

/* 栅栏三 24份 */
.span24-1 {
  width: 4.17%;
}

.span24-2 {
  width: 8.33%;
}

.span24-3 {
  width: 12.5%;
}

.span24-4 {
  width: 16.67%;
}

.span24-5 {
  width: 20.83%;
}

.span24-6 {
  width: 25%;
}

.span24-7 {
  width: 29.17%;
}

.span24-8 {
  width: 33.33%;
}

.span24-9 {
  width: 37.5%;
}

.span24-10 {
  width: 41.67%;
}

.span24-11 {
  width: 45.83%;
}

.span24-12 {
  width: 50%;
}

.span24-13 {
  width: 54.17%;
}

.span24-14 {
  width: 58.33%;
}

.span24-15 {
  width: 62.5%;
}

.span24-16 {
  width: 66.67%;
}

.span24-17 {
  width: 70.83%;
}

.span24-18 {
  width: 75%;
}

.span24-19 {
  width: 79.17%;
}

.span24-20 {
  width: 83.33%;
}

.span24-21 {
  width: 87.5%;
}

.span24-22 {
  width: 91.67%;
}

.span24-23 {
  width: 95.83%;
}

.span24-24 {
  width: 100%;
}
